#{extends 'main_cliente.html' /}
#{set title:'Contato' /}

  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/main.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/layout_cliente.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_style.css'}">
  <link rel="stylesheet" type="text/css" media="all" href="@{'public/stylesheets/form_responsive.css'}">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
   
  <script type="text/javascript" src="@{'public/javascripts/jquery.min.js'}"></script>
  <script type="text/javascript" src="@{'public/javascripts/jquery.maskedinput-1.3.min.js'}"></script>
  <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<div id="geral">   

<div id="info">
    <h3>Entre em contato conosco...</h3>
    <p>Telefone<br />(81)3447-4144 / 8853-8159<br />Rua Carlos Rios, número 62 - Imbiribeira</p>
    <br />
    <h3>Ou</h3>
</div>
     
    <section id="container">   
        
        <h2>Contato</h2>
        

		#{form @Application.enviaEmail(), id:'form_contato'}
        
            <div id="wrapping" class="clearfix">
                <section id="aligned">
                <h3>Contato</h3>
                                                                                                                                                                                            
                #{field 'nome'}
                    <p class="${field.errorClass}">
                        <input type="text" name="${field.name}" value="${nome}" id="nome" placeholder="Nome" autocomplete="off" tabindex="10" class="txtinput" required>
                        <span class="error">${field.error}</span>
                    </p>
                #{/field}
                
                #{field 'emailRemetente'}
		        <p class="${field.errorClass}">
		            <input type="email" name="${field.name}" value="${emailRemetente}" id="email" placeholder="Endereço de E-Mail: (ex.)xxx@xxx.com" autocomplete="off" tabindex="5" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		   		#{/field}
                
                #{field 'telefone'}
		        <p class="${field.errorClass}">
		            <input type="tel" name="${field.name}" value="${telefone}"  id="telefone" placeholder="Telefone: (ddd)xxxx-xxxx" tabindex="3" class="txtinput" required>
		            <span class="error">${field.error}</span>
		        </p>
		    	#{/field}
                
                
                #{field 'descricao'}
                    <p class="${field.errorClass}">
                         <textarea cols="40" id="descricao" rows="8" name="${field.name}" value="${descricao}" maxlength="400" placeholder="Mensagem" required></textarea>
                        <span class="error">${field.error}</span>
                    </p>
                #{/field}          
                </section>
        
                <section id="buttons">
                <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Limpar">
                <input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="13" value="Enviar">
                <br style="clear:both;">
                </section>
            </div> 
		#{/form}        	
    </section>

</div>

<script>
	$(document).ready(function(){
		$("#telefone").mask("(99)9999-9999");
	});
</script>

